*{margin: 0;padding: 0;font-size: 0.03rem;font-family: "微软雅黑";}
div#music.stop{
	animation-play-state:paused;
}
div#music{
	width: 0.1rem;
	height: 0.1rem;
	position: fixed;
	right: 5%;
	bottom: 5%;
	z-index: 9999;
	background: url(../images/music.gif) no-repeat center center;
	background-size: 100% 100%;
	animation: rotate 2s linear infinite;
}

div#container{
	height: 1rem;
	position: relative;
	overflow: hidden;
	background: #434A54;
}
h1,h2,h3,h4,h5{font-weight: normal;}
div#container article{position: absolute;left: 0;top: 0;width: 100%;}
div#container article section{height: 1rem;position: relative;overflow: hidden;}
div#container article .one{color: #FFFF00;}
div#container article .one h3{
	margin: 0.02rem auto;
	width:0.44rem;
	font-size: 0.08rem;
	text-align: center;
	padding: 0.01rem 0;
	border: 0.01rem solid #FFFF00;
}
div#container article .one p{
	width:0.44rem;
	text-align: center;
	margin: 0.03rem auto;
	font-size: 0.05rem;
	padding: 0.01rem 0.013rem;
	background: #FFFF00;
	color: #000;
}
div#container article .one div:nth-of-type(3){
	text-align: center;
	position: absolute;
	left: 38%;
	bottom: 10%;
}
/*第二屏*/
div#container article .two div:nth-of-type(1){
	width:0.26rem;
	margin: 0.03rem;
	text-align: center;
	padding: 0.02rem 0;
	border: 0.003rem solid #FFFF00;
	text-transform: uppercase;
	color: #FFFF00;
}
div#container article .two h4{
	font-size: 0.04rem;
}
div#container article .two h2{
	font-size: 0.08rem;
	font-weight: 700;
}
div#container article .two div:nth-of-type(2){position: relative;overflow: hidden;color:#FFFF00;}
div#container article .two div:nth-of-type(2) img{
	margin: 0.03rem;
	float: left;
	width: 35%;
	border-radius:50% ;
	border: 0.01rem solid #FFFF00;
	position: relative;
	z-index: 2;
}
div#container article .two div:nth-of-type(2) p{
	width:0.4rem;
	height: 0.15rem;
	padding-right: 0.01rem;
	position: absolute;
	top: 50%;
	right:-0.03rem;
	background: url(../images/pixel.png) no-repeat;
	background-size: 100% 100%;
	z-index: 1;
}
div#container article .two div:nth-of-type(2) h2{
	font-weight: normal;
	position: absolute;
	top: 30%;
	right: 0.06rem;
}

div#container article .two div[me='introduce']{
	overflow: hidden;
	text-align: center;
	clear: both;
	margin:0.03rem auto;
}
div#container article .two div:nth-of-type(3){
	margin-top:0.06rem;
}
div#container article .two div[me='introduce'] h6{
	font-size: 0.025rem;
	float: left;
	display: inline-block;
	width: 0.15rem;
	margin: 0 0.04rem;
	padding: 0.004rem 0.008rem;
	text-transform: uppercase;
	background: #A0A3A8;
	color: #FFFF00;
	font-weight: normal;
}
div#container article .two div[me='introduce'] p{
	float: left;
	display: inline-block;
	
	color: #FEFEFE;
}
/*第二屏幕结束*/
/*第三屏幕开始*/
div#container article .three div:nth-of-type(1),div#container article .three div:nth-of-type(2),
div#container article .three div:nth-of-type(3){
	margin: 0.05rem 0 0 0.03rem;
	width:0.4rem;
	border: 0.008rem solid #FFFF00;
	text-align: center;
	font-size: 0.035rem;
	color: #FFFF00;
	font-weight: 600;
	line-height: 1.5em;
}
div#container article .three div:nth-of-type(2){
	margin-top: 0rem;
	background: #FFFF00;
	color: #252525;
}
div#container article .three div:nth-of-type(3){
	font-size: 0.03rem;
	border: none;
	font-weight: normal;
	width:0.5rem;
	text-align: left;
}
div#container article .three div:nth-of-type(3) span{color:#D89593;font-size: 0.035rem;text-transform: uppercase;}
div#container article .three div:nth-of-type(4){
	width: 0.5rem;
	height: 0.1rem;
	position: absolute;
	top: 26%;
	left: 4%;
	background: url(../images/pixel.png) no-repeat;
}
div#container article .three div[me='skill']{
	width: 0.15rem;height: 0.15rem;
	box-sizing: border-box;
	border-radius: 50%;
	padding: 0.02rem;
	line-height: 3em;
	text-align: center;
	vertical-align: auto;
	color: #FFFFFF;
	position: absolute;
	
}
div#container article .three div:nth-of-type(5){
	/*width: 0.2rem;height: 0.2rem;*/
	background: #00FFFF;
	line-height: 2em;
	top: 53%;
	left:38% ;
}
div#container article .three div:nth-of-type(6){
	background: #FE0000;top: 34%;left: 38%;
}
div#container article .three div:nth-of-type(7){
	background: #FE0098;top: 46%;left: 70%;
}
div#container article .three div:nth-of-type(8){
	background: #FE00FE;top: 66%;left: 70%;
}
div#container article .three div:nth-of-type(9){
	background: #00CB32;top: 74%;left: 38%;
}
div#container article .three div:nth-of-type(10){
	background: #6500FE;top: 66%;left: 6%;
}
div#container article .three div:nth-of-type(11){
	background: #FE9832;top: 46%;left: 6%;
}
div#container article .three div:nth-of-type(12){
	background: #000000;top: 36%;left: 6%;
}
div#container article .four div{
	font-size: 0.035rem;
	height: 0.15rem;
	line-height: 2em;
	text-align: center;
	color: #FEFEFE;
	margin:0.04rem auto 0;
}
div#container article .four div:nth-of-type(1){
	
}




/*切换屏幕按钮*/
div#next{
	width: 62px;
	height: 39px;
	position: absolute;
	left: 43%;
	bottom: 0.5%;
	z-index: 9999;
	background: url(../images/up.png);
	background-size:100% 100% ;
}
div#next.next{
	animation: up 1s infinite ease-out;
}
/*下一个的图标 关键帧*/
@keyframes up{
	from{transform: translateY(0px);}
	to{transform: translateY(-20px);}
}
/*第三屏线的滑动*/
@keyframes lineslide{
	from{transform: translateX(1rem);}
	to{transform: translateX(0rem);}
}
.lineslide{
	animation: lineslide 2s ease-out;
}
/*音乐图标的旋转*/
@keyframes rotate{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}



